/**
 * User: Célia Calçada
 * Date: 01-07-2013
 * Login form panel view
 */

Ext.define('Mobile-app.view.Login', {
    extend: 'Ext.form.Panel',
    alias: 'widget.loginview',

    //get all required modules form the init loading
    requires: [
        'Ext.form.FieldSet',
        'Ext.form.Password',
        'Ext.Label',
        'Ext.Img'
    ],

    //set view config
    config: {
        layout: {
            type: 'vbox',
            pack: 'center'
        },
        submitOnAction : false,
        items: [
            {
                xtype: 'fieldset',
                margin: '0 0 0 0',
                items: [
                    {
                        xtype: 'panel',
                        width: '100%',
                        height: 73,
                        docked: 'top',
                        margin: '0 0 50 0',
                        items: [
                            {
                                xtype: 'image',
                                src: 'resources/logos/moov_truck_logo.png',
                                centered: true,
                                width: 160,
                                height: 73
                            }]
                    },
                    {
                        xtype: 'panel',
                        docked: 'top',
                        layout: 'hbox',
                        defaults: {
                            xtype: 'panel',
                            docked: 'right',
                            width: 16,
                            height: 16,
                            margin: '0 3 5 0',
                            initialize: function() {
                                this.element.on({
                                    scope: this,
                                    tap: function(event, html, obj) {
                                        //get language based on the panel's ID
                                        this.up('loginview').reloadWithLang(this.id.substr(-2).toLowerCase());
                                    }
                                });
                            },
                            scope: this
                        },
                        items: [{
                            id: 'flag-EN',
                            cls: 'flag country-flags-UK'
                        },{
                            id: 'flag-PT',
                            cls: 'flag country-flags-PT'
                        },{
                            id: 'flag-FR',
                            cls: 'flag country-flags-FR'
                        },{
                            id: 'flag-ES',
                            cls: 'flag country-flags-ES'
                        },{
                            id: 'flag-DE',
                            cls: 'flag country-flags-DE'
                        }]
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'userField',
                        name: 'username',
                        label: $.t('login.username'),
                        style: 'font-size:80%'
                    },
                    {
                        xtype: 'passwordfield',
                        itemId: 'passField',
                        name: 'password',
                        label: $.t('login.password'),
                        style: 'font-size:80%'
                    }
                ]

            },
            //this label will contain the error information to the user
            {
                xtype: 'label',
                html: '',
                itemId: 'signInFailedLabel',
                style : 'color:#990000; text-align: right;',
                height: 25
            },
            {
                xtype: 'button',
                itemId: 'loginButton',
                ui: 'action',
                padding: '10',
                text: $.t('login.enter')
            }

        ],

        //set all listeners handlers
        listeners: [
            //listen for the button 'login' click
            {
                delegate: '#loginButton',
                event: 'tap',
                fn: 'checkForm'
            },
            //reset the error label when focus on the form again
            {
                delegate: '#userField',
                event: 'focus',
                fn: 'hideSignInFailedMessage'
            },{
                delegate: '#userField',
                event: 'keyup',
                fn: function(field, e) {
                    if (e.browserEvent.keyIdentifier === 'Enter') {
                        this.down('#passField').focus();
                    }
                }
            },{
                delegate: '#passField',
                event: 'keyup',
                fn: function(field, e) {
                    if (e.browserEvent.keyIdentifier === 'Enter') {
                        this.checkForm();
                    }
                }
            }
        ]

    },

    /***
     * Triggered when the user taps (clicks) the login button
     */
    checkForm: function () {

        //get values
        var me = this,
            usernameField = me.down('#userField'),
            passwordField = me.down('#passField'),
            label = me.down('#signInFailedLabel'),
            username = usernameField.getValue(),
            password = passwordField.getValue();

        //empty error message
        label.setHtml('');

        //fire for submission
        me.fireEvent('signInCommand', me, username, password);

    },

    /***
     * Used to show an error message on the window
     * @param message The message to be shown
     */
    showSignInFailedMessage: function (message) {

        var label = this.down('#signInFailedLabel');
        label.setHtml(message);
    },

    /***
     * Used to hide any existing error message
     */
    hideSignInFailedMessage: function () {

        var label = this.down('#signInFailedLabel');
        label.setHtml('');
    },

    /***
     * Reload the page with the new language setting
     * @param lang The laguage to be set (2 char length)
     */
    reloadWithLang: function(lang){
        //save value on cookie
        Ext.util.Cookies.set("i18next", lang);
        //reload page
        window.location = "?" + new Date().getTime();
    }

});